<template>
	<view :data-theme="themeStyle">
		<mescroll-uni @getData="getData" refs="mescroll" :size="10">
			<block slot="list">
				<view class="recharge-box" v-if="list.length">
					<view class="box-title">充值余额</view>
					<!-- <view class="box-custom">
						<input type="number" value="" v-model="amount" @focus="cumberFocus" placeholder="请输入金额" placeholder-class="pla-number"/>
					</view> -->
					<view class="box-content">
						<view 
							class="content-item" 
							v-for="(item, index) in list" 
							:key="index" 
							@click="itemClick(index,item.recharge_id)"
							:class="isIndex == index? 'ns-border-color ns-text-color':''"
							style="height: 200upx;"
						>
						<!-- item.cover_img -->
							<view style="width: 100%;height: 100upx;padding: 5upx;box-sizing: border-box;"><image style="width: 100%;height: 100%;border-radius: 5upx;" :src="$util.img(item.cover_img)"/></view>
							<view class="price1" :class="isIndex == index? 'ns-text-color':''">{{ item.face_value }}元</view>
							<view class="price2" :class="isIndex == index? 'ns-text-color':''">售价{{ item.buy_price }}元</view>
						</view>
					</view>
					<view class="box-text" v-if="isIndex !== -1">充值{{ list[isIndex].face_value }}元赠送：<text class="ns-text-color">{{ list[isIndex].point }}积分</text></view>
				</view>
				<view v-else>
					<ns-empty text="暂无充值套餐,敬请期待" :isIndex="!0"></ns-empty>
				</view>
			</block>
		</mescroll-uni>
		<loading-cover ref="loadingCover"></loading-cover>
		<view class="box-btn">
			<view class="ns-bg-color" @click="toDetail" style="background: linear-gradient(270deg, #ff5500,#ff891e );">去充值</view>
			<view @click="toxieyi">
				<text class="ns-text-color">充值说明</text>
			</view>
			<!-- <view @click="toOrderList">
				<text class="ns-text-color">充值记录</text>
			</view> -->
			
		</view>
		<ns-show-toast></ns-show-toast>
	</view>
</template>

<script>
	import globalConfig from '@/common/js/golbalConfig.js'
	import nsShowToast from '@/components/ns-show-toast/ns-show-toast.vue'
	export default {
		data() {
			return {
				list: [],
				balanceInfo: {
					balance: 0,
					balance_money: 0
				},
				isIndex: -1,
				recharge_id: "",
				amount:""
			};
		},
		components: {
			nsShowToast
		},
		onLoad() {},
		onShow() {
			// 刷新多语言
			this.$langConfig.refresh();
			this.getUserInfo()
		},
		mixins: [globalConfig],
		methods: {
			toxieyi(){
				this.$util.redirectTo('/otherpages/xieyi/xieyi');
			},
			toOrderList(){
				this.$util.redirectTo('/otherpages/recharge/order_list/order_list');
			},
			//点击每一个
			itemClick(index,id) {
				if(this.amount) return
				this.isIndex = index
				this.recharge_id = id
			},
			//输入框聚焦
			cumberFocus() {
				this.isIndex = -1
			},
			getUserInfo() {
				this.$api.sendRequest({
					url: '/api/memberaccount/info',
					data: {
						account_type: 'balance,balance_money'
					},
					success: res => {
						if (res.data) {
							this.balanceInfo = res.data;
						} else {
							this.$util.showToast({
								title: res.message
							});
						}
					}
				});
			},
			getData(mescroll) {
				this.$api.sendRequest({
					url: '/memberrecharge/api/memberrecharge/page',
					data: {
						page_size: mescroll.size,
						page: mescroll.num
					},
					success: res => {
						let newArr = [];
						let msg = res.message;
						if (res.code == 0 && res.data) {
							newArr = res.data.list;
						} else {
							this.$util.showToast({
								title: msg
							});
						}
						mescroll.endSuccess(newArr.length);
						//设置列表数据
						if (mescroll.num == 1) this.list = []; //如果是第一页需手动制空列表
						this.list = this.list.concat(newArr); //追加新数据
						if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
					},
					fail: () => {
						//联网失败的回调
						mescroll.endErr();
						if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
					}
				});
			},
			toDetail() {
				if(this.recharge_id !== '') {
					this.$api.sendRequest({
						url: '/memberrecharge/api/ordercreate/create',
						data: {
							recharge_id: this.recharge_id
						},
						success: res => {
							if (res.data && res.code == 0) {
								this.$util.redirectTo('/pages/pay/index/index', {
									code: res.data
								}, 'redirectTo');
							} else {
								this.$util.showToast({
									title: res.message
								});
							}
						}
					});
				}else if(this.amount !== '') {
					this.$api.sendRequest({
						url:'/memberrecharge/api/ordercreate/create',
						data: {
							recharge_id: 0,
							face_value: this.amount
						},
						success: res => {
							
							if (res.data && res.code == 0) {
								this.$util.redirectTo('/pages/pay/index/index', {
									code: res.data
								}, 'redirectTo');
							} else {
								this.$util.showToast({
									title: res.message
								});
							}
						}
					})
				}else {
					uni.showToast({
						icon:"none",
						title:"请选择套餐"
					})
				}
			},
			imageError(index) {
				this.list[index].cover_img = this.$util.getDefaultImage().default_goods_img;
				this.$forceUpdate();
			}
		}
	};
</script>

<style lang="scss">
	.box-btn {
		width: 100%;
		height: 200rpx;
		position: fixed;
		left: 0;
		bottom: 0;
		text-align: center;
		z-index: 999;
		view {
			width: 640rpx;
			height: 78rpx;
			color: #fff;
			margin: 0 auto;
			text-align: center;
			font-size: $ns-font-size-lg;
			line-height: 78rpx;
			border-radius: 38rpx;
			margin-bottom: 20rpx;
		}
		text {
			font-size: $ns-font-size-lg;
		}
	}
	.recharge-box {
		width: 702rpx;
		margin: 0 auto;
		padding: 60rpx 24rpx;
		background: #fff;
		height: 100%;
		box-sizing: border-box;
		border-radius: 10rpx;
		margin-top: 20rpx;
		
		.box-title {
			text-align: center;
			font-size: $ns-font-size-lg;
		}
		.box-custom {
			width: 226rpx;
			border-bottom: 1px solid #DDDDDD;
			margin: 0 auto;
			margin-top: 49rpx;
			line-height: 1;
			padding-bottom: 10rpx;
			box-sizing: border-box;
			.pla-number {
				font-size: 30rpx;
			}
			input {
				height: 97rpx;
				width: 100%;
				font-size: 62rpx;
				color: #000;
				text-align: center;
			}
		}
		.box-content {
			width: 100%;
			padding: 0 24rpx;
			margin-top: 65rpx;
			box-sizing: border-box;
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
			.content-item {
				width: 30%;
				height: 128rpx;
				border-radius: 10rpx;
				border: 1px solid rgba(221,221,221,1);
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				color: #000;
				margin-bottom: 20rpx;
				.price1 {
					font-size: $ns-font-size-x-lg;
					
				}
				.price2 {
					font-size: $ns-font-size-x-sm;
				}
			}
		}
		.box-text {
			padding: 0 24rpx;
			margin-top: 38rpx;
		}
	}
</style>
